.dplayer {
  position: relative;
  overflow: hidden;
  user-select: none;
  line-height: 1;

  * {
    box-sizing: content-box;
  }

  &:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;

    .dplayer-danmaku {
      .dplayer-danmaku-top,
      .dplayer-danmaku-bottom {
        &.dplayer-danmaku-move {
          animation: danmaku-center 6s linear;
          animation-play-state: paused;
        }
      }

      .dplayer-danmaku-right {
        &.dplayer-danmaku-move {
          animation: danmaku 8s linear;
          animation-play-state: paused;
        }
      }
    }
  }

  &.dplayer-no-danmaku {
    .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
      .dplayer-setting-showdan,
      .dplayer-setting-danmaku {
        display: none;
      }
    }

    .dplayer-controller .dplayer-icons .dplayer-comment {
      display: none;
    }

    .dplayer-danmaku {
      display: none;
    }
  }

  &.dplayer-playing {

    .dplayer-danmaku .dplayer-danmaku-move {
      animation-play-state: running !important;
    }

    @media (min-width: 900px) {
      .dplayer-controller-mask {
        opacity: 0;
      }
      .dplayer-controller {
        opacity: 0;
      }

      &:hover {
        .dplayer-controller-mask {
          opacity: 1;
        }
        .dplayer-controller {
          opacity: 1;
        }
      }
    }
  }

  &.dplayer-loading {
    .dplayer-bezel .diplayer-loading-icon {
      display: block;
    }

    .dplayer-danmaku .dplayer-danmaku-move {
      animation-play-state: paused !important;
    }
  }

  &.dplayer-hide-controller {
    .dplayer-controller-mask {
      opacity: 0;
      transform: translateY(100%);
    }
    .dplayer-controller {
      opacity: 0;
      transform: translateY(100%);
    }
  }
  &.dplayer-show-controller {
    .dplayer-controller-mask {
      opacity: 1;
    }
    .dplayer-controller {
      opacity: 1;
    }
  }
  &.dplayer-fulled {
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  &.dplayer-mobile {
    .dplayer-volume,
    .dplayer-camera-icon {
      display: none !important;
    }

    .dplayer-full-in-icon {
      position: static !important;
      display: inline-block !important;
    }

    .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-input {
      width: 200px;
    }

    .dplayer-comment-setting-title {
      display: none;
    }

    .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box {
      left: 17px;
    }

    .dplayer-controller .dplayer-icons .dplayer-icon {
      width: 40px;
    }
  }

  .dplayer-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;

    &.dplayer-mask-show {
      display: block;
    }
  }

  .dplayer-video-wrap {
    position: relative;
    background: #000;
    font-size: 0;
    width: 100%;
    height: 100%;

    .dplayer-video {
      width: 100%;
      height: 100%;
      display: none;
    }

    .dplayer-video-current {
      display: block;
    }

    .dplayer-video-prepare {
      display: none;
    }
  }

  .dplayer-danmaku {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 22px;
    color: #fff;

    .dplayer-danmaku-item {
      display: inline-block;
      pointer-events: none;
      user-select: none;
      cursor: default;
      white-space: nowrap;
      text-shadow: .5px .5px .5px rgba(0, 0, 0, .5);

      &--demo {
        position: absolute;
        visibility: hidden;
      }
    }

    .dplayer-danmaku-right {
      position: absolute;
      right: 0;
      transform: translateX(100%);

      &.dplayer-danmaku-move {
        will-change: transform;
        animation: danmaku 5s linear;
        animation-play-state: paused;
      }
    }

    @keyframes danmaku {
      from {
        transform: translateX(100%);
      }
    }

    .dplayer-danmaku-top,
    .dplayer-danmaku-bottom {
      position: absolute;
      width: 100%;
      text-align: center;
      visibility: hidden;

      &.dplayer-danmaku-move {
        will-change: visibility;
        animation: danmaku-center 4s linear;
        animation-play-state: paused;
      }
    }

    @keyframes danmaku-center {
      from {
        visibility: visible;
      }
      to {
        visibility: visible;
      }
    }
  }

  .dplayer-bezel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 22px;
    color: #fff;
    pointer-events: none;

    .dplayer-fill {
      fill: rgba(255, 255, 255, .8);
    }

    .dplayer-bezel-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -26px 0 0 -26px;
      height: 52px;
      width: 52px;
      padding: 12px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .5);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;

      &.dplayer-bezel-transition {
        animation: bezel-hide .5s linear;
      }

      @keyframes bezel-hide {
        from {
          opacity: 1;
          transform: scale(1);
        }
        to {
          opacity: 0;
          transform: scale(2);
        }
      }
    }

    .dplayer-danloading {
      position: absolute;
      top: 50%;
      margin-top: -7px;
      width: 100%;
      text-align: center;
      font-size: 14px;
      line-height: 14px;
      animation: my-face 5s infinite ease-in-out;
    }

    .diplayer-loading-icon {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -18px 0 0 -18px;
      height: 36px;
      width: 36px;
      pointer-events: none;

      .diplayer-loading-hide {
        display: none;
      }

      .diplayer-loading-dot {
        animation: diplayer-loading-dot-fade .8s ease infinite;
        opacity: 0;
        fill: #fff;
        transform-origin: 4px 4px;

        @for $i from 7 through 1 {
          &.diplayer-loading-dot-#{$i} {
            animation-delay: .1s * $i;
          }
        }
      }

      @keyframes diplayer-loading-dot-fade {
        0% {
          opacity: .7;
          transform: scale(1.2, 1.2)
        }
        50% {
          opacity: .25;
          transform: scale(.9, .9)
        }
        to {
          opacity: .25;
          transform: scale(.85, .85)
        }
      }
    }
  }

  .dplayer-controller-mask {
    background: url() repeat-x bottom;
    height: 98px;
    width: 100%;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease;
  }

  .dplayer-controller {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 41px;
    padding: 0 20px;
    user-select: none;
    transition: all 0.3s ease;

    .dplayer-bar-wrap {
      padding: 5px 0;
      cursor: pointer;
      position: absolute;
      bottom: 33px;
      width: calc(100% - 40px);
      height: 3px;

      &:hover {
        .dplayer-thumb {
          transform: scale(1) !important;
        }
      }

      .dplayer-bar-time {
        &.hidden {
          opacity: 0;
        }
        position: absolute;
        left: 0px;
        top: -20px;
        width: 30px;
        border-radius: 4px;
        padding: 5px 7px;
        background-color: rgba(0, 0, 0, 0.62);
        color: #fff;
        font-size: 12px;
        text-align: center;
        opacity: 1;
        transition: opacity .1s ease-in-out;
        word-wrap: normal;
      }

      .dplayer-bar {
        position: relative;
        height: 3px;
        width: 100%;
        background: rgba(255, 255, 255, .2);
        cursor: pointer !important;

        .dplayer-loaded {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background: rgba(255, 255, 255, .4);
          height: 3px;
          transition: all 0.5s ease;
          will-change: width;
        }

        .dplayer-played {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          height: 3px;
          will-change: width;

          .dplayer-thumb {
            position: absolute;
            top: 0;
            right: 5px;
            margin-top: -4px;
            margin-right: -10px;
            height: 11px;
            width: 11px;
            border-radius: 50%;
            cursor: pointer !important;
            transition: all .3s ease-in-out;
            transform: scale(0);
          }
        }
      }
    }

    .dplayer-icons {
      height: 38px;
      position: absolute;
      bottom: 0;

      &.dplayer-icons-left {
        .dplayer-icon {
          padding: 7px;
        }
      }
      &.dplayer-icons-right {
        right: 20px;

        .dplayer-icon {
          padding: 8px;
        }
      }

      #dplayer-menu {
        stroke: #ddd;
        stroke-width: 1px;
      }

      .dplayer-time {
        line-height: 38px;
        color: #eee;
        text-shadow: 0 0 2px rgba(0, 0, 0, .5);
        vertical-align: middle;
        font-size: 13px;
        cursor: default;
      }

      .dplayer-icon {
        width: 40px;
        height: 100%;
        border: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
        opacity: .8;
        transition: all .2s ease-in-out;
        vertical-align: middle;
        box-sizing: border-box;
        display: inline-block;

        &:hover {
          opacity: 1;
        }

        &.dplayer-quality-icon {
          color: #fff;
          width: auto;
          line-height: 22px;
          font-size: 14px;
        }

        &.dplayer-comment-icon {
          padding: 10px 9px 9px;
        }

        &.dplayer-setting-icon {
          padding-top: 8.5px;
        }
      }

      .dplayer-fill {
        fill: #fff;
      }

      .dplayer-volume {
        position: relative;
        display: inline-block;
        cursor: pointer !important;
        height: 100%;

        &:hover {
          .dplayer-volume-bar {
            width: 45px !important;
          }

          .dplayer-thumb {
            transform: scale(1) !important;
          }
        }

        &.dplayer-volume-active {
          .dplayer-volume-bar {
            width: 45px !important;
          }

          .dplayer-thumb {
            transform: scale(1) !important;
          }
        }

        .dplayer-volume-bar-wrap {
          display: inline-block;
          margin: 0 5px 0 -5px;
          vertical-align: middle;
          height: 100%;

          .dplayer-volume-bar {
            position: relative;
            top: 17px;
            width: 0;
            height: 3px;
            background: #aaa;
            transition: all 0.3s ease-in-out;

            .dplayer-volume-bar-inner {
              position: absolute;
              bottom: 0;
              left: 0;
              height: 100%;
              transition: all 0.1s ease;
              will-change: width;

              .dplayer-thumb {
                position: absolute;
                top: 0;
                right: 5px;
                margin-top: -4px;
                margin-right: -10px;
                height: 11px;
                width: 11px;
                border-radius: 50%;
                cursor: pointer !important;
                transition: all .3s ease-in-out;
                transform: scale(0);
              }
            }
          }
        }
      }

      .dplayer-setting {
        display: inline-block;
        height: 100%;

        .dplayer-setting-box {
          position: absolute;
          right: 0;
          bottom: 50px;
          transform: translateX(170px);
          width: 150px;
          border-radius: 2px;
          background: rgba(28, 28, 28, 0.9);
          padding: 7px 0;
          transition: all .3s ease-in-out;
          overflow: hidden;
          z-index: 2;

          &.dplayer-setting-box-open {
            transform: translateX(0);
          }

          &.dplayer-setting-box-narrow {
            width: 70px;
            height: 180px;
            text-align: center;
          }
        }

        .dplayer-setting-item,
        .dplayer-setting-speed-item {
          height: 30px;
          padding: 5px 10px;
          box-sizing: border-box;
          cursor: pointer;

          &:hover {
            background-color: rgba(255, 255, 255, .1);
          }
        }

        .dplayer-setting-danmaku {
          padding: 5px 0;

          .dplayer-label {
            padding: 0 10px;
            display: inline;
          }

          &:hover {
            .dplayer-label {
              display: none;
            }
            .dplayer-danmaku-bar-wrap {
              display: inline-block;
            }
          }

          &.dplayer-setting-danmaku-active {
            .dplayer-label {
              display: none;
            }
            .dplayer-danmaku-bar-wrap {
              display: inline-block;
            }
          }

          .dplayer-danmaku-bar-wrap {
            padding: 0 10px;
            box-sizing: border-box;
            display: none;
            vertical-align: middle;
            height: 100%;
            width: 100%;

            .dplayer-danmaku-bar {
              position: relative;
              top: 8.5px;
              width: 100%;
              height: 3px;
              background: #fff;
              transition: all 0.3s ease-in-out;

              .dplayer-danmaku-bar-inner {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 100%;
                transition: all 0.1s ease;
                background: #aaa;
                will-change: width;

                .dplayer-thumb {
                  position: absolute;
                  top: 0;
                  right: 5px;
                  margin-top: -4px;
                  margin-right: -10px;
                  height: 11px;
                  width: 11px;
                  border-radius: 50%;
                  cursor: pointer !important;
                  transition: all .3s ease-in-out;
                  background: #aaa;
                }
              }
            }
          }
        }
      }

      .dplayer-full {
        display: inline-block;
        height: 100%;
        position: relative;

        &:hover {
          .dplayer-full-in-icon {
            display: block;
          }
        }

        .dplayer-full-in-icon {
          position: absolute;
          top: -30px;
          z-index: 1;
          display: none;
        }
      }

      .dplayer-quality {
        position: relative;
        display: inline-block;
        height: 100%;
        z-index: 2;

        &:hover {
          .dplayer-quality-list {
            display: block;
          }
          .dplayer-quality-mask {
            display: block;
          }
        }

        .dplayer-quality-mask {
          display: none;
          position: absolute;
          bottom: 38px;
          left: -18px;
          width: 80px;
          padding-bottom: 12px;
        }

        .dplayer-quality-list {
          display: none;
          font-size: 12px;
          width: 80px;
          border-radius: 2px;
          background: rgba(28, 28, 28, 0.9);
          padding: 5px 0;
          transition: all .3s ease-in-out;
          overflow: hidden;
          color: #fff;
          text-align: center;
        }

        .dplayer-quality-item {
          height: 25px;
          box-sizing: border-box;
          cursor: pointer;
          line-height: 25px;

          &:hover {
            background-color: rgba(255, 255, 255, .1);
          }
        }
      }

      .dplayer-comment {
        display: inline-block;
        height: 100%;

        .dplayer-comment-box {
          position: absolute;
          right: 0;
          bottom: 50px;
          transform: translateX(382px);
          border-radius: 2px;
          transition: all .3s ease-in-out;
          z-index: 2;

          &.dplayer-comment-box-open {
            transform: translateX(0);
          }

          .dplayer-comment-setting-icon {
            height: 24px;
            width: 24px;
            position: absolute;
            top: 5px;
            left: 7px;
            padding: 0;
            opacity: 1;

            &:hover {
              .dplayer-fill {
                fill: #aaa;
              }
            }

            .dplayer-fill {
              transition: all .2s ease-in-out;
              fill: #ddd;
            }
          }

          .dplayer-comment-setting-box {
            position: absolute;
            background: #fff;
            bottom: 40px;
            left: -93px;
            box-shadow: 0 0 25px rgba(0, 0, 0, .3);
            border-radius: 4px;
            padding: 10px 10px 16px;
            font-size: 14px;
            width: 204px;
            transition: all .3s ease-in-out;
            transform: scale(0);

            &.dplayer-comment-setting-open {
              transform: scale(1);
            }

            &::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 50%;
              margin-left: -12px;
              background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path fill="#FFF" d="M23.7,0c-1.2,0-2.4,0.5-3.2,1.3l-7.7,7.8c-0.4,0.4-1.1,0.4-1.5,0L3.5,1.3C2.7,0.5,1.5,0,0.3,0"/></svg>');
              width: 24px;
              height: 12px;
            }

            input[type=radio] {
              display: none;
            }

            label {
              cursor: pointer;
            }

            .dplayer-comment-setting-title {
              font-size: 14px;
              color: #555;
              padding: 6px;
            }

            .dplayer-comment-setting-type {
              font-size: 0;

              label {
                &:nth-child(2) {
                  span {
                    border-radius: 4px 0 0 4px;
                  }
                }
                &:nth-child(4) {
                  span {
                    border-radius: 0 4px 4px 0;
                  }
                }
              }

              span {
                width: 33%;
                padding: 4px 6px;
                line-height: 16px;
                display: inline-block;
                font-size: 12px;
                color: #555;
                border: 1px solid #E4E4E6;
                margin-right: -1px;
                box-sizing: border-box;
                text-align: center;
                cursor: pointer;
              }

              input:checked + span {
                background: #E4E4E6;
              }
            }

            .dplayer-comment-setting-color {
              font-size: 0;

              label {
                font-size: 0;
                padding: 6px;
                display: inline-block;
              }

              span {
                width: 22px;
                height: 22px;
                display: inline-block;
                border-radius: 50%;
                box-sizing: border-box;
                cursor: pointer;

                &:hover {
                  animation: my-face 5s infinite ease-in-out;
                  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
                }
              }

              input:checked + span {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
                border: none !important;
              }
            }
          }

          .dplayer-comment-input {
            outline: none;
            border: none;
            padding: 8px 31px;
            font-size: 14px;
            line-height: 18px;
            text-align: center;
            border-radius: 4px;
            width: 300px;
            background: #fff;
            margin: 0;
            height: auto;
          }

          .dplayer-send-icon {
            height: 22px;
            width: 22px;
            position: absolute;
            top: 6px;
            right: 7px;
            padding: 0;
            opacity: 1;

            &:hover {
              .dplayer-fill {
                fill: #aaa;
              }
            }

            .dplayer-fill {
              transition: all .2s ease-in-out;
              fill: #ddd;
            }
          }
        }
      }

      .dplayer-label {
        color: #eee;
        font-size: 13px;
        display: inline-block;
        vertical-align: middle;
      }

      .dplayer-toggle {
        width: 32px;
        height: 100%;
        text-align: center;
        display: inline-block;
        font-size: 0;
        vertical-align: middle;
        float: right;

        input {
          max-height: 0;
          max-width: 0;
          display: none;
        }
        input + label {
          display: inline-block;
          position: relative;
          box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
          border: 1px solid rgb(223, 223, 223);
          height: 20px;
          width: 32px;
          border-radius: 10px;
          box-sizing: border-box;
          cursor: pointer;
          transition: .2s ease-in-out;
        }

        input + label:before {
          content: "";
          position: absolute;
          display: block;
          height: 18px;
          width: 18px;
          top: 0;
          left: 0;
          border-radius: 15px;
          transition: .2s ease-in-out;
        }

        input + label:after {
          content: "";
          position: absolute;
          display: block;
          left: 0;
          top: 0;
          border-radius: 15px;
          background: #fff;
          transition: .2s ease-in-out;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
          height: 18px;
          width: 18px;
        }

        input:checked + label {
          border-color: rgba(255, 255, 255, 0.5);
        }

        input:checked + label:before {
          width: 30px;
          background: rgba(255, 255, 255, 0.5);
        }

        input:checked + label:after {
          left: 12px;
        }
      }
    }
  }

  .dplayer-menu {
    position: absolute;
    width: 150px;
    border-radius: 2px;
    background: rgba(28, 28, 28, 0.9);
    padding: 5px 0;
    overflow: hidden;
    z-index: 3;
    display: none;

    &.dplayer-menu-show {
      display: block;
    }

    .dplayer-menu-item {
      height: 30px;
      padding: 5px 10px;
      box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, .1);
      }

      .dplayer-menu-label a {
        color: #eee;
        font-size: 13px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .dplayer-logo {
    pointer-events: none;
    position: absolute;
    left: 20px;
    top: 20px;
    max-width: 50px;
    max-height: 50px;

    img {
      max-width: 100%;
      max-height: 100%;
      background: none;
    }
  }

  .dplayer-notice {
    opacity: 0;
    position: absolute;
    bottom: 60px;
    left: 20px;
    font-size: 14px;
    border-radius: 2px;
    background: rgba(28, 28, 28, 0.9);
    padding: 7px 20px;
    transition: all .3s ease-in-out;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
  }
}

@keyframes my-face {
  2% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }
  4% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  6% {
    transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  8% {
    transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  10% {
    transform: translate(0, 2.5px) rotate(1.5deg);
  }
  12% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }
  14% {
    transform: translate(0, -1.5px) rotate(1.5deg);
  }
  16% {
    transform: translate(0, -0.5px) rotate(-1.5deg);
  }
  18% {
    transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  20% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }
  22% {
    transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  24% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }
  26% {
    transform: translate(0, 0.5px) rotate(0.5deg);
  }
  28% {
    transform: translate(0, 0.5px) rotate(1.5deg);
  }
  30% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }
  32% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  34% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  36% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }
  38% {
    transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  40% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }
  42% {
    transform: translate(0, 2.5px) rotate(-1.5deg);
  }
  44% {
    transform: translate(0, 1.5px) rotate(0.5deg);
  }
  46% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }
  48% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }
  50% {
    transform: translate(0, 0.5px) rotate(0.5deg);
  }
  52% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }
  54% {
    transform: translate(0, -1.5px) rotate(1.5deg);
  }
  56% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }
  58% {
    transform: translate(0, 0.5px) rotate(2.5deg);
  }
  60% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }
  62% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }
  64% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }
  66% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  68% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  70% {
    transform: translate(0, 1.5px) rotate(0.5deg);
  }
  72% {
    transform: translate(0, 2.5px) rotate(1.5deg);
  }
  74% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }
  76% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }
  78% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }
  80% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }
  82% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }
  84% {
    transform: translate(0, 1.5px) rotate(2.5deg);
  }
  86% {
    transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  88% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }
  90% {
    transform: translate(0, 2.5px) rotate(-0.5deg);
  }
  92% {
    transform: translate(0, 0.5px) rotate(-0.5deg);
  }
  94% {
    transform: translate(0, 2.5px) rotate(0.5deg);
  }
  96% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }
  98% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
}